<script lang="ts" setup>
import { useReusableTemplate } from '@/utils/useReusableTemplate'
const [DefineTemplate, renderTemplate] = useReusableTemplate()

const handlerClick = (title: string) => {
  console.log(`点击了${title}`)
}
</script>

<template>
  <div class="container">
    <DefineTemplate v-slot="{ title }">
      <div>
        <h3>{{ title }}</h3>
        <div @click="handlerClick(title)">内容</div>
      </div>
    </DefineTemplate>
    <renderTemplate title="Header" />
    <div class="wrapper">Header</div>
    <renderTemplate title="Main" />
    <div class="wrapper">Main</div>
    <renderTemplate title="Footer" />
    <div class="wrapper">Footer</div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 40%;
  margin: 0 auto;
}

.wrapper {
  padding: 10px;
  margin: 10px 0;
  text-align: center;
  background-color: #b41484;
}
</style>
